<template>
    <div class="app-container">
        <el-card shadow="never" v-loading="loading">
            <el-tree
                default-expand-all
                :data="treeData"
                :props="treeProps"
                @node-click="handleNodeClick"
                @node-contextmenu="showContextmenu">
            </el-tree>
            <XContextmenu ref="contextmenu" :list="contextMenuList"/>
        </el-card>

        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="节点名称" prop="areaName">
                    <el-input v-model="form.areaName"></el-input>
                </el-form-item>
                <el-form-item label="排序号" prop="sortNum">
                    <el-input type="number" v-model="form.sortNum"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSave">保 存</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
import XPagination from "../../components/xpagination/XPagination";
import * as areaInfo from "../../api/areaInfo"
import * as formUtils from "../../utils/formUtils";
import XContextmenu from "../../components/xcontextmenu/XContextmenu";
export default {
    name: "list",
    components: {XContextmenu, XPagination},
    data() {
        return {
            contextMenuList:[
                {
                    title:'添加子节点',
                    clickFn:this.addChildNode
                },
                {
                    title:'添加节点',
                    clickFn:this.addNode
                },
                {
                    title:'修改节点',
                    clickFn:this.editNode
                },
                {
                    title:'删除节点',
                    clickFn:this.deleteNode
                },
            ],
            optionData:{},
            node:null,
            tree:null,
            treeData:[],
            treeProps:{
                children:"childs",
                label:"areaName"
            },
            dialogVisible:false,
            dialogTitle:"",
            editStatus:"add",
            form:{
                uid:"",
                pid:"",
                areaName:"",
                sortNum:1
            },
            rules:{
                areaName: [
                    { required: true, message: "不能为空", trigger: "blur" },
                ],
            }


        }
    },
    methods: {
        showContextmenu(e, data, n, t){
            console.log("==========>",data,n,t);
            this.optionData = data;
            this.node = n;
            this.tree = t;
            this.$refs.contextmenu.showContextMenu(e);
        },
        handleNodeClick(data, node) {
            this.$refs.contextmenu.hideContextMenu();
        },
        addChildNode(){
            this.dialogTitle = "添加子节点";
            this.editStatus = "addChild";
            this.dialogVisible = true;
            this.$nextTick(()=>{
                this.$refs.form.resetFields();
            });
        },
        addNode(){
            this.dialogTitle = "添加节点";
            this.editStatus = "add";
            this.dialogVisible = true;
            this.$nextTick(()=>{
                this.$refs.form.resetFields();
            });
        },
        editNode(){
            this.dialogTitle = "修改节点";
            this.editStatus = "edit";
            this.dialogVisible = true;
            this.$nextTick(()=>{
                this.$refs.form.resetFields();
                Object.keys(this.form).forEach(k=>{
                    this.form[k] = this.optionData[k];
                });
            });
        },
        deleteNode(){
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const param = {
                    uid:this.optionData.uid
                };
                areaInfo.deleteById(param).then(result =>{
                    this.getData();
                    this.$message.success("删除成功");
                }).catch(error=>{
                    console.log(error);
                    this.$message.error("删除失败:"+error);
                });
            }).catch(() => {
                this.$message.info("已取消删除");
            });
        },
        getData(){
            areaInfo.queryTree({}).then(result=>{
                console.log(result);
                this.treeData = result.data.data;
            }).catch(error => {
                console.log(error);
            })
        },
        handleSave(){
            this.$refs.form.validate((valid) => {
                if (!valid) {
                    return false;
                }
                this.dispatchSave();
            });
        },
        dispatchSave(){
            const fnMap = {
                "addChild":this.handleAddChild,
                "add":this.handleAdd,
                "edit":this.handleEdit,
            };
            fnMap[this.editStatus]();
        },
        handleAddChild(){
            const param = Object.assign({},this.form,{
                pid:this.optionData.uid,
                uid:undefined,
            });
            areaInfo.insert(param).then(result =>{
                this.getData();
                this.$message.success("添加成功");
                this.dialogVisible = false;
            }).catch(error=>{
                console.log(error);
                this.$message.error("添加失败"+error);
            });
        },
        handleAdd(){
            const param = Object.assign({},this.form,{
                pid:this.optionData.pid,
                uid:undefined,
            });
            areaInfo.insert(param).then(result =>{
                this.getData();
                this.$message.success("添加成功");
                this.dialogVisible = false;
            }).catch(error=>{
                console.log(error);
                this.$message.error("添加失败"+error);
            });
        },
        handleEdit(){
            const param = Object.assign({},this.form);
            areaInfo.update(param).then(result =>{
                this.getData();
                this.$message.success("修改成功");
                this.dialogVisible = false;
            }).catch(error=>{
                console.log(error);
                this.$message.error("修改失败"+error);
            });
        }
    },
    mounted() {
        this.getData()
    }
}
</script>

<style scoped lang="scss">

</style>
